<template>
    <div class="xtx-skeleton" :style="{ width: width + 'px', height: height + 'px' }" :class="{ shan: animated, fade: fade }">
        <div class="block" :style="{ backgroundColor: bg }"></div>
    </div>
</template>

<script lang="ts" setup name="XtxSkeleton">
defineProps({
    bg: {
        type: String,
        default: '#efefef'
    },
    width: {
        type: Number,
        required: true
    },
    height: {
        type: Number,
        required: true
    },
    animated: {
        type: Boolean,
        default: false
    },
    fade: {
        type: Boolean,
        default: false
    }
})
</script>

<style lang="less" scoped>
.xtx-skeleton {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    .block {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }
}
.shan {
    &::after {
        content: '';
        position: absolute;
        animation: shan 1.5s ease 0s infinite;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(
            to left,
            rgba(255, 255, 0) 0,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%,
        );
        transform: skew(-45deg);
    }
}
@keyframes shan {
    0% {
        left: -100%;
    }
    100% {
        left: 120%;
    }
}
.fade {
    animation: fade 1s linear infinite alternate;
}
@keyframes fade {
    form {
        opacity: .2;
    }
    to {
        opacity: 1;
    }
}
</style>